<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link href="../data-show.css" rel="stylesheet">
    <link href="../data-show-default.css" rel="stylesheet" />
    <link rel="stylesheet" href="highlight/styles/solarized-dark.css">
    <script src="jquery.min.js"></script>
    <script src="echarts.min.js"></script>
    <script src="highlight/highlight.pack.js"></script>
    <script>
      hljs.initHighlightingOnLoad();
    </script>
    <title></title>
    <style>
      body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }

      * {
        color: rgba(00, 255, 255, 0.6);
      }

      p {
        text-indent: 2em;
        line-height: 1.5rem;
      }
    </style>
  </head>
  <body>
    <div class="ds-continer ds-bg1">
      <div class="ds-header ds-stack">
        <div class="ds-horizontal ds-fixed">
          <div class="ds-grow ds-title1-left ds-shadow" style="background-color: aliceblue;">bjtang</div>
          <div class="ds-grow ds-title1-right ds-shadow" style="background-color: aliceblue;">Version 2.1.0</div>
        </div>
        <div class="ds-title1 ds-shadow ds-top ds-center">数据可视化展示框架</div>
      </div>
      <div class="ds-content ds-horizontal">
        <div class="ds-border1 ds-w20 ds-vertical">
          <a href="#install">安装</a>
          <a href="#screen">屏幕适配</a>
          <a href="#continer">主容器</a>
          <a href="#layout">布局</a>
          <a href="#box">盒子</a>
          <a href="#text">文本预定义</a>
        </div>
        <div class="ds-border1 ds-w80 ds-scroll">
          <div style="padding:1rem;">
            <h2 id="install">安装</h2>
            <h2 id="screen">屏幕适配</h2>
            <p>数据展示主要针对一般分辨率和大屏幕，主要适配1080p(1920×1080)分辨率屏幕。</p>
            <p>布局大小采用rem单位，1080 高度时 1rem = 16px；2160 时 1rem = 32px</p>
            <h2 id="continer">主容器</h2>
            <p>主容器 "ds-continer" 将完全铺满整个浏览器窗口。主容器中只能是 "ds-header"、"ds-content"、"ds-footer"，可根据实际需要省略
              "ds-header"、"ds-footer"。</p>
            <div class="ds-continer ds-bg" style="position:static;overflow:hidden;width:auto;height:20rem;">
              <div class="ds-header ds-border"><span class="ds-center">HEADER</span></div>
              <div class="ds-content ds-border"><span class="ds-center-middle">CONTENT</span></div>
              <div class="ds-footer ds-border"><span class="ds-center">FOOTER</span></div>
            </div>
            <pre><code class="html">&lt;div class="ds-continer"&gt;
  &lt;div class="ds-header"&gt;&lt;/div&gt;
  &lt;div class="ds-content"&gt;&lt;/div&gt;
  &lt;div class="ds-footer"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
            <h3>只有头部和内容区的主容器</h3>
            <div class="ds-continer ds-bg" style="position:static;overflow:hidden;width:auto;height:20rem;">
              <div class="ds-header ds-border"><span class="ds-center">HEADER</span></div>
              <div class="ds-content ds-border"><span class="ds-center-middle">CONTENT</span></div>
            </div>
            <pre><code class="html">&lt;div class="ds-continer"&gt;
  &lt;div class="ds-header"&gt;&lt;/div&gt;
  &lt;div class="ds-content"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
            <h3>只有内容区的主容器</h3>
            <div class="ds-continer ds-bg" style="position:static;overflow:hidden;width:auto;height:20rem;">
              <div class="ds-content ds-border"><span class="ds-center-middle">CONTENT</span></div>
            </div>
            <pre><code class="html">&lt;div class="ds-continer"&gt;
  &lt;div class="ds-content"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
            <h2 id="layout">布局</h2>
            <h3>横向布局</h3>
            <div class="ds-horizontal ds-bg" style="height: 3rem;">
              <div class="ds-border"><span class="ds-center-middle">1</span></div>
              <div class="ds-border"><span class="ds-center-middle">2</span></div>
              <div class="ds-border"><span class="ds-center-middle">3</span></div>
            </div>
            <pre><code>&lt;div class=&quot;ds-horizontal&quot;&gt;
  &lt;div class=&quot;ds-border&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;ds-border&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;ds-border&quot;&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
            <h3>横向布局平均分布</h3>
            <div class="ds-horizontal ds-bg" style="height: 3rem;">
              <div class="ds-grow ds-border"><span class="ds-center-middle">1</span></div>
              <div class="ds-grow ds-border"><span class="ds-center-middle">2</span></div>
              <div class="ds-grow ds-border"><span class="ds-center-middle">3</span></div>
              <div class="ds-grow ds-border"><span class="ds-center-middle">4</span></div>
              <div class="ds-grow ds-border"><span class="ds-center-middle">5</span></div>
              <div class="ds-grow ds-border"><span class="ds-center-middle">6</span></div>
            </div>
            <pre><code>&lt;div class=&quot;ds-horizontal&quot;&gt;
  &lt;div class=&quot;ds-grow ds-border&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;ds-grow ds-border&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;ds-grow ds-border&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;ds-grow ds-border&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;ds-grow ds-border&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;ds-grow ds-border&quot;&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
            <h3>横向布局扩展</h3>
            <div class="ds-horizontal ds-bg" style="height: 3rem;">
              <div class="ds-border"><span class="ds-center-middle">1</span></div>
              <div class="ds-border"><span class="ds-center-middle">2</span></div>
              <div class="ds-grow ds-border"><span class="ds-center-middle">3</span></div>
            </div>
            <pre><code>&lt;div class=&quot;ds-horizontal&quot;&gt;
  &lt;div class=&quot;ds-border&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;ds-border&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;ds-grow ds-border&quot;&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
            <h3>横向布局宽度</h3>
            <div class="ds-horizontal ds-bg" style="height: 3rem;">
              <div class="ds-w382 ds-border"><span class="ds-center-middle">1</span></div>
              <div class="ds-w618 ds-border"><span class="ds-center-middle">2</span></div>
            </div>
            <pre><code>&lt;div class=&quot;ds-horizontal&quot;&gt;
  &lt;div class=&quot;ds-w382 ds-border&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;ds-w618 ds-border&quot;&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
            <p>横向布局可使用的预定义黄金分割宽度：ds-w618、ds-w382、ds-w191</p>
            <p>横向布局可使用的预定义百分比宽度：ds-w80、ds-w60、ds-w50、ds-w40、ds-w30、ds-w25、ds-w20</p>
            <p>横向布局未指定宽度时将自适应内容宽度。</p>
            <h3>纵向布局</h3>
            <div class="ds-vertical ds-bg">
              <div class="ds-border"><span class="ds-center-middle">1</span></div>
              <div class="ds-border"><span class="ds-center-middle">2</span></div>
              <div class="ds-border"><span class="ds-center-middle">3</span></div>
              <div class="ds-border"><span class="ds-center-middle">4</span></div>
              <div class="ds-border"><span class="ds-center-middle">5</span></div>
              <div class="ds-border"><span class="ds-center-middle">6</span></div>
            </div>
            <pre><code>&lt;div class=&quot;ds-vertical&quot;&gt;
  &lt;div class=&quot;ds-border&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;ds-border&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;ds-border&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;ds-border&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;ds-border&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;ds-border&quot;&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
            <h3>纵向布局平均分布</h3>
            <div class="ds-vertical ds-bg" style="height: 20rem;">
              <div class="ds-grow ds-border"><span class="ds-center-middle">1</span></div>
              <div class="ds-grow ds-border"><span class="ds-center-middle">2</span></div>
              <div class="ds-grow ds-border"><span class="ds-center-middle">3</span></div>
            </div>
            <pre><code>&lt;div class=&quot;ds-vertical&quot;&gt;
  &lt;div class=&quot;ds-grow ds-border&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;ds-grow ds-border&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;ds-grow ds-border&quot;&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
            <h3>纵向布局扩展</h3>
            <div class="ds-vertical ds-bg" style="height: 20rem;">
              <div class="ds-border"><span class="ds-center-middle">1</span></div>
              <div class="ds-border"><span class="ds-center-middle">2</span></div>
              <div class="ds-grow ds-border"><span class="ds-center-middle">3</span></div>
            </div>
            <pre><code>&lt;div class=&quot;ds-vertical&quot;&gt;
  &lt;div class=&quot;ds-border&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;ds-border&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;ds-grow ds-border&quot;&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
            <h3>纵向布局高度</h3>
            <div class="ds-vertical ds-bg" style="height: 20rem;">
              <div class="ds-h618 ds-border"><span class="ds-center-middle">1</span></div>
              <div class="ds-h191 ds-border"><span class="ds-center-middle">2</span></div>
              <div class="ds-h191 ds-border"><span class="ds-center-middle">3</span></div>
            </div>
            <pre><code>&lt;div class=&quot;ds-vertical&quot;&gt;
  &lt;div class=&quot;ds-h618 ds-border&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;ds-h191 ds-border&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;ds-h191 ds-border&quot;&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
            <p>纵向布局可使用的预定义黄金分割高度：ds-h618、ds-h382、ds-h191</p>
            <p>纵向布局可使用的预定义百分比高度：ds-h80、ds-h60、ds-h50、ds-h40、ds-h30、ds-h25、ds-h20</p>
            <p>横向布局未指定高度时将自适应内容高度。</p>
            <h3>层叠布局</h3>
            <p>层叠布局可使用 ds-full 将层叠层填满父容器。</p>
            <p>层叠布局可使用预定义顶边位置：ds-top、ds-top10、ds-top20、ds-top30、ds-top40</p>
            <p>层叠布局可使用预定义左边位置：ds-left、ds-left10、ds-left20、ds-left30、ds-left40</p>
            <p>层叠布局可使用预定义右边位置：ds-right、ds-right10、ds-right20、ds-right30、ds-right40</p>
            <p>层叠布局可使用预定义底边位置：ds-bottom、ds-bottom10、ds-bottom20、ds-bottom30、ds-bottom40</p>
            <p>层叠布局可使用水平居中位置：ds-center</p>
            <p>层叠布局可使用垂直居中位置：ds-middle</p>
            <p>层叠布局可使用绝对居中位置：ds-center-middle</p>
            <div class="ds-stack ds-bg" style="height: 20rem;">
              <div class="ds-full ds-border"><span class="ds-center">ds-full</span></div>
              <div class="ds-left-10 ds-top-10 ds-border"><span>ds-left-10 ds-top-10</span></div>
              <div class="ds-center ds-top-10 ds-border"><span>ds-center ds-top-10</span></div>
              <div class="ds-right-10 ds-top-10 ds-border"><span>ds-right-10 ds-top-10</span></div>
              <div class="ds-right-10 ds-middle ds-border"><span>ds-right-10 ds-middle</span></div>
              <div class="ds-right-10 ds-bottom-10 ds-border"><span>ds-right-10 ds-bottom-10</span></div>
              <div class="ds-center ds-bottom-10 ds-border"><span>ds-center ds-bottom-10</span></div>
              <div class="ds-left-10 ds-bottom-10 ds-border"><span>ds-left-10 ds-bottom-10</span></div>
              <div class="ds-left-10 ds-middle ds-border"><span>ds-left-10 ds-bottom-10</span></div>
              <div class="ds-center-middle ds-border"><span>ds-center-middle</span></div>
            </div>
            <pre><code>&lt;div class=&quot;ds-stack ds-bg&quot;&gt;
  &lt;div class=&quot;ds-full ds-border&quot;&gt;&lt;span class=&quot;ds-center&quot;&gt;ds-full&lt;/span&gt;&lt;/div&gt;
  &lt;div class=&quot;ds-left-10 ds-top-10 ds-border&quot;&gt;&lt;span&gt;ds-left-10 ds-top-10&lt;/span&gt;&lt;/div&gt;
  &lt;div class=&quot;ds-center ds-top-10 ds-border&quot;&gt;&lt;span&gt;ds-center ds-top-10&lt;/span&gt;&lt;/div&gt;
  &lt;div class=&quot;ds-right-10 ds-top-10 ds-border&quot;&gt;&lt;span&gt;ds-right-10 ds-top-10&lt;/span&gt;&lt;/div&gt;
  &lt;div class=&quot;ds-right-10 ds-middle ds-border&quot;&gt;&lt;span&gt;ds-right-10 ds-middle&lt;/span&gt;&lt;/div&gt;
  &lt;div class=&quot;ds-right-10 ds-bottom-10 ds-border&quot;&gt;&lt;span&gt;ds-right-10 ds-bottom-10&lt;/span&gt;&lt;/div&gt;
  &lt;div class=&quot;ds-center ds-bottom-10 ds-border&quot;&gt;&lt;span&gt;ds-center ds-bottom-10&lt;/span&gt;&lt;/div&gt;
  &lt;div class=&quot;ds-left-10 ds-bottom-10 ds-border&quot;&gt;&lt;span&gt;ds-left-10 ds-bottom-10&lt;/span&gt;&lt;/div&gt;
  &lt;div class=&quot;ds-left-10 ds-middle ds-border&quot;&gt;&lt;span&gt;ds-left-10 ds-bottom-10&lt;/span&gt;&lt;/div&gt;
  &lt;div class=&quot;ds-center-middle ds-border&quot;&gt;&lt;span&gt;ds-center-middle&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
            <h3>层叠布局宽高</h3>
            <p>层叠布局可使用的预定义黄金分割宽度：ds-w618、ds-w382、ds-w191</p>
            <p>层叠布局可使用的预定义百分比宽度：ds-w80、ds-w60、ds-w50、ds-w40、ds-w30、ds-w25、ds-w20</p>
            <p>层叠布局可使用的预定义黄金分割高度：ds-h618、ds-h382、ds-h191</p>
            <p>层叠布局可使用的预定义百分比高度：ds-h80、ds-h60、ds-h50、ds-h40、ds-h30、ds-h25、ds-h20</p>
            <div class="ds-stack ds-bg" style="height: 20rem;">
              <div class="ds-full ds-border">ds-full</div>
              <div class="ds-center-middle ds-w618 ds-h618 ds-border">ds-center-middle</div>
            </div>
            <pre><code>&lt;div class=&quot;ds-stack ds-bg&quot;&gt;
  &lt;div class=&quot;ds-full ds-border&quot;&gt;ds-full&lt;/div&gt;
  &lt;div class=&quot;ds-center-middle ds-w618 ds-h618 ds-border&quot;&gt;ds-center-middle&lt;/div&gt;
&lt;/div&gt;</code></pre>
            <h3>流式布局</h3>
            <div class="ds-flow ds-bg">
              <div class="ds-border">1</div>
              <div class="ds-border">2</div>
              <div class="ds-border">3</div>
            </div>
            <pre><code>&lt;div class=&quot;ds-flow ds-bg&quot;&gt;
  &lt;div class=&quot;ds-border&quot;&gt;1&lt;/div&gt;
  &lt;div class=&quot;ds-border&quot;&gt;2&lt;/div&gt;
  &lt;div class=&quot;ds-border&quot;&gt;3&lt;/div&gt;
&lt;/div&gt;</code></pre>
            <h3>流式布局每行2元素</h3>
            <div class="ds-flow2 ds-bg">
              <div class="ds-border">1</div>
              <div class="ds-border">2</div>
              <div class="ds-border">3</div>
            </div>
            <pre><code>&lt;div class=&quot;ds-flow2 ds-bg&quot;&gt;
  &lt;div class=&quot;ds-border&quot;&gt;1&lt;/div&gt;
  &lt;div class=&quot;ds-border&quot;&gt;2&lt;/div&gt;
  &lt;div class=&quot;ds-border&quot;&gt;3&lt;/div&gt;
&lt;/div&gt;</code></pre>
            <h3>流式布局每行3元素</h3>
            <div class="ds-flow3 ds-bg">
              <div class="ds-border">1</div>
              <div class="ds-border">2</div>
              <div class="ds-border">3</div>
              <div class="ds-border">4</div>
            </div>
            <pre><code>&lt;div class=&quot;ds-flow3 ds-bg&quot;&gt;
  &lt;div class=&quot;ds-border&quot;&gt;1&lt;/div&gt;
  &lt;div class=&quot;ds-border&quot;&gt;2&lt;/div&gt;
  &lt;div class=&quot;ds-border&quot;&gt;3&lt;/div&gt;
  &lt;div class=&quot;ds-border&quot;&gt;4&lt;/div&gt;
&lt;/div&gt;</code></pre>
            <h3>流式布局每行4元素</h3>
            <div class="ds-flow4 ds-bg">
              <div class="ds-border">1</div>
              <div class="ds-border">2</div>
              <div class="ds-border">3</div>
              <div class="ds-border">4</div>
              <div class="ds-border">5</div>
            </div>
            <pre><code>&lt;div class=&quot;ds-flow4 ds-bg&quot;&gt;
  &lt;div class=&quot;ds-border&quot;&gt;1&lt;/div&gt;
  &lt;div class=&quot;ds-border&quot;&gt;2&lt;/div&gt;
  &lt;div class=&quot;ds-border&quot;&gt;3&lt;/div&gt;
  &lt;div class=&quot;ds-border&quot;&gt;4&lt;/div&gt;
  &lt;div class=&quot;ds-border&quot;&gt;5&lt;/div&gt;
&lt;/div&gt;</code></pre>
            <h3>流式布局每行5元素</h3>
            <div class="ds-flow5 ds-bg">
              <div class="ds-border">1</div>
              <div class="ds-border">2</div>
              <div class="ds-border">3</div>
              <div class="ds-border">4</div>
              <div class="ds-border">5</div>
              <div class="ds-border">6</div>
            </div>
            <pre><code>&lt;div class=&quot;ds-flow5 ds-bg&quot;&gt;
  &lt;div class=&quot;ds-border&quot;&gt;1&lt;/div&gt;
  &lt;div class=&quot;ds-border&quot;&gt;2&lt;/div&gt;
  &lt;div class=&quot;ds-border&quot;&gt;3&lt;/div&gt;
  &lt;div class=&quot;ds-border&quot;&gt;4&lt;/div&gt;
  &lt;div class=&quot;ds-border&quot;&gt;5&lt;/div&gt;
  &lt;div class=&quot;ds-border&quot;&gt;6&lt;/div&gt;
&lt;/div&gt;</code></pre>
            <h3>滚动条</h3>
            <p>将 ds-scroll 样式应用到具有固定大小的父容器已获得滚动条效果。</p>
            <p>如果仅需要横向或纵向滚动条可使用 ds-scroll-x、ds-scroll-y 样式应用到具有固定大小的父容器已获得单边滚动条效果。</p>
            <p>注意：在以下情况可应用滚动条，1容器在布局中指定了 ds-grow 自动扩展；2容器显式指定宽或高；3容器通过 ds-auto-size 自动适配父容器。</p>
            <div class="ds-scroll ds-border ds-bg" style="height:6rem;">
              <p>CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。</p>
              <p>CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新，因此通过采用模块方法，CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时间支持不同特性，这也让跨浏览器开发变得复杂。</p>
            </div>
            <pre><code>&lt;div class=&quot;ds-scroll ds-border ds-bg&quot; style=&quot;height:6rem;&quot;&gt;
  &lt;p&gt;...&lt;/p&gt;
  &lt;p&gt;...&lt;/p&gt;
&lt;/div&gt;</code></pre>
            <h3>自动大小</h3>
            <p>通过指定 ds-auto-size 样式类可将元素宽高自动适配到父容器。</p>
            <p>通过指定 ds-auto-width ds-auto-height 样式类可将元素宽或高自动适配到父容器。</p>
            <div class="ds-horizontal ds-bg" style="height:6rem;">
              <div class="ds-w20 ds-border">
                <div class="ds-auto-size ds-border"></div>
              </div>
              <div class="ds-w30 ds-border">
                <div class="ds-auto-size ds-border"></div>
              </div>
              <div class="ds-grow ds-border">
                <div class="ds-auto-size ds-border"></div>
              </div>
            </div>
            <p>自动适配宽高有助于在使用 echarts 等图表时避免手动指定图表容器的固定大小。注意：当页面的resize事件触发时，虽然图表容器已经自动适配但 echarts
              图表并不会自动改变大小，您仍然需要手动执行图表的 resize() 方法。</p>
            <h2 id="box">盒子</h2>
            <h3>内容从上至下</h3>
            <div class="ds-horizontal">
              <div class="ds-box ds-border">
                <div>bjtang</div>
                <div><img src="images/logo.imge" style="width:4rem;" /></div>
              </div>
              <div class="ds-box ds-border">
                <div><img src="images/logo.imge" style="width:4rem;" /></div>
                <div>bjtang</div>
              </div>
              <div class="ds-box ds-border">
                <div>bjtang</div>
                <div><img src="images/logo.imge" style="width:4rem;" /></div>
                <div><span class="ds-text4">bjtang</span></div>
              </div>
              <div class="ds-box ds-border">
                <div>bjtang</div>
                <div><span class="ds-text4">bjtang</span></div>
                <div><img src="images/logo.imge" style="width:4rem;" /></div>
              </div>
              <div class="ds-box ds-border">
                <div><img src="images/logo.imge" style="width:4rem;" /></div>
                <div>bjtang</div>
                <div><span class="ds-text4">bjtang</span></div>
              </div>
            </div>
            <pre><code>&lt;div class=&quot;ds-horizontal&quot;&gt;
  &lt;div class=&quot;ds-box ds-border&quot;&gt;
    &lt;div&gt;bjtang&lt;/div&gt;
    &lt;div&gt;&lt;img src=&quot;images/logo.imge&quot; style=&quot;width:4rem;&quot; /&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;ds-box ds-border&quot;&gt;
    &lt;div&gt;&lt;img src=&quot;images/logo.imge&quot; style=&quot;width:4rem;&quot; /&gt;&lt;/div&gt;
    &lt;div&gt;bjtang&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;ds-box ds-border&quot;&gt;
    &lt;div&gt;bjtang&lt;/div&gt;
    &lt;div&gt;&lt;img src=&quot;images/logo.imge&quot; style=&quot;width:4rem;&quot; /&gt;&lt;/div&gt;
    &lt;div&gt;&lt;span class=&quot;ds-text4&quot;&gt;bjtang&lt;/span&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;ds-box ds-border&quot;&gt;
    &lt;div&gt;bjtang&lt;/div&gt;
    &lt;div&gt;&lt;span class=&quot;ds-text4&quot;&gt;bjtang&lt;/span&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img src=&quot;images/logo.imge&quot; style=&quot;width:4rem;&quot; /&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;ds-box ds-border&quot;&gt;
    &lt;div&gt;&lt;img src=&quot;images/logo.imge&quot; style=&quot;width:4rem;&quot; /&gt;&lt;/div&gt;
    &lt;div&gt;bjtang&lt;/div&gt;
    &lt;div&gt;&lt;span class=&quot;ds-text4&quot;&gt;bjtang&lt;/span&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
            <h3>内容从下至上</h3>
            <div class="ds-horizontal">
              <div class="ds-box1 ds-border">
                <div>bjtang</div>
                <div><img src="images/logo.imge" style="width:4rem;" /></div>
              </div>
              <div class="ds-box1 ds-border">
                <div><img src="images/logo.imge" style="width:4rem;" /></div>
                <div>bjtang</div>
              </div>
              <div class="ds-box1 ds-border">
                <div>bjtang</div>
                <div><img src="images/logo.imge" style="width:4rem;" /></div>
                <div><span class="ds-text4">bjtang</span></div>
              </div>
              <div class="ds-box1 ds-border">
                <div>bjtang</div>
                <div><span class="ds-text4">bjtang</span></div>
                <div><img src="images/logo.imge" style="width:4rem;" /></div>
              </div>
              <div class="ds-box1 ds-border">
                <div><img src="images/logo.imge" style="width:4rem;" /></div>
                <div>bjtang</div>
                <div><span class="ds-text4">bjtang</span></div>
              </div>
            </div>
            <pre><code>&lt;div class=&quot;ds-horizontal&quot;&gt;
  &lt;div class=&quot;ds-box1 ds-border&quot;&gt;
    &lt;div&gt;bjtang&lt;/div&gt;
    &lt;div&gt;&lt;img src=&quot;images/logo.imge&quot; style=&quot;width:4rem;&quot; /&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;ds-box1 ds-border&quot;&gt;
    &lt;div&gt;&lt;img src=&quot;images/logo.imge&quot; style=&quot;width:4rem;&quot; /&gt;&lt;/div&gt;
    &lt;div&gt;bjtang&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;ds-box1 ds-border&quot;&gt;
    &lt;div&gt;bjtang&lt;/div&gt;
    &lt;div&gt;&lt;img src=&quot;images/logo.imge&quot; style=&quot;width:4rem;&quot; /&gt;&lt;/div&gt;
    &lt;div&gt;&lt;span class=&quot;ds-text4&quot;&gt;bjtang&lt;/span&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;ds-box1 ds-border&quot;&gt;
    &lt;div&gt;bjtang&lt;/div&gt;
    &lt;div&gt;&lt;span class=&quot;ds-text4&quot;&gt;bjtang&lt;/span&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img src=&quot;images/logo.imge&quot; style=&quot;width:4rem;&quot; /&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;ds-box1 ds-border&quot;&gt;
    &lt;div&gt;&lt;img src=&quot;images/logo.imge&quot; style=&quot;width:4rem;&quot; /&gt;&lt;/div&gt;
    &lt;div&gt;bjtang&lt;/div&gt;
    &lt;div&gt;&lt;span class=&quot;ds-text4&quot;&gt;bjtang&lt;/span&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
            <h3>内容从左至右</h3>
            <div class="ds-horizontal">
              <div class="ds-box2 ds-w25 ds-border">
                <div><img src="images/logo.imge" style="width:2.5rem;" /></div>
                <div>
                  <div>bjtang</div>
                  <div><span class="ds-text4">www.bjtang.com</span></div>
                </div>
              </div>
              <div class="ds-box2 ds-w25 ds-border">
                <div>
                  <div>bjtang</div>
                  <div><span class="ds-text4">www.bjtang.com</span></div>
                </div>
                <div><img src="images/logo.imge" style="width:2.5rem;" /></div>
              </div>
              <div class="ds-box2 ds-w25 ds-border">
                <div><img src="images/logo.imge" style="width:2.5rem;" /></div>
                <div>
                  <div>bjtang</div>
                  <div><span class="ds-text4">www.bjtang.com</span></div>
                </div>
                <div>
                  <div>重庆</div>
                  <div><span class="ds-text4">2020-1-1</span></div>
                </div>
              </div>
              <div class="ds-box2 ds-w25 ds-border">
                <div>
                  <div>bjtang</div>
                  <div><span class="ds-text4">www.bjtang.com</span></div>
                </div>
                <div>
                  <div>重庆</div>
                  <div><span class="ds-text4">2020-1-1</span></div>
                </div>
                <div><img src="images/logo.imge" style="width:2.5rem;" /></div>
              </div>
            </div>
            <pre><code>&lt;div class=&quot;ds-horizontal&quot;&gt;
  &lt;div class=&quot;ds-box2 ds-w25 ds-border&quot;&gt;
    &lt;div&gt;&lt;img src=&quot;images/logo.imge&quot; style=&quot;width:2.5rem;&quot; /&gt;&lt;/div&gt;
    &lt;div&gt;
      &lt;div&gt;bjtang&lt;/div&gt;
      &lt;div&gt;&lt;span class=&quot;ds-text4&quot;&gt;www.bjtang.com&lt;/span&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;ds-box2 ds-w25 ds-border&quot;&gt;
    &lt;div&gt;
      &lt;div&gt;bjtang&lt;/div&gt;
      &lt;div&gt;&lt;span class=&quot;ds-text4&quot;&gt;www.bjtang.com&lt;/span&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div&gt;&lt;img src=&quot;images/logo.imge&quot; style=&quot;width:2.5rem;&quot; /&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;ds-box2 ds-w25 ds-border&quot;&gt;
    &lt;div&gt;&lt;img src=&quot;images/logo.imge&quot; style=&quot;width:2.5rem;&quot; /&gt;&lt;/div&gt;
    &lt;div&gt;
      &lt;div&gt;bjtang&lt;/div&gt;
      &lt;div&gt;&lt;span class=&quot;ds-text4&quot;&gt;www.bjtang.com&lt;/span&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;div&gt;重庆&lt;/div&gt;
      &lt;div&gt;&lt;span class=&quot;ds-text4&quot;&gt;2020-1-1&lt;/span&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;ds-box2 ds-w25 ds-border&quot;&gt;
    &lt;div&gt;
      &lt;div&gt;bjtang&lt;/div&gt;
      &lt;div&gt;&lt;span class=&quot;ds-text4&quot;&gt;www.bjtang.com&lt;/span&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;div&gt;重庆&lt;/div&gt;
      &lt;div&gt;&lt;span class=&quot;ds-text4&quot;&gt;2020-1-1&lt;/span&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div&gt;&lt;img src=&quot;images/logo.imge&quot; style=&quot;width:2.5rem;&quot; /&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
            <h3>内容从右至左</h3>
            <div class="ds-horizontal">
              <div class="ds-box3 ds-w25 ds-border">
                <div><img src="images/logo.imge" style="width:2.5rem;" /></div>
                <div>
                  <div>bjtang</div>
                  <div><span class="ds-text4">www.bjtang.com</span></div>
                </div>
              </div>
              <div class="ds-box3 ds-w25 ds-border">
                <div>
                  <div>bjtang</div>
                  <div><span class="ds-text4">www.bjtang.com</span></div>
                </div>
                <div><img src="images/logo.imge" style="width:2.5rem;" /></div>
              </div>
              <div class="ds-box3 ds-w25 ds-border">
                <div><img src="images/logo.imge" style="width:2.5rem;" /></div>
                <div>
                  <div>bjtang</div>
                  <div><span class="ds-text4">www.bjtang.com</span></div>
                </div>
                <div>
                  <div>重庆</div>
                  <div><span class="ds-text4">2020-1-1</span></div>
                </div>
              </div>
              <div class="ds-box3 ds-w25 ds-border">
                <div>
                  <div>bjtang</div>
                  <div><span class="ds-text4">www.bjtang.com</span></div>
                </div>
                <div>
                  <div>重庆</div>
                  <div><span class="ds-text4">2020-1-1</span></div>
                </div>
                <div><img src="images/logo.imge" style="width:2.5rem;" /></div>
              </div>
            </div>
            <pre><code>&lt;div class=&quot;ds-horizontal&quot;&gt;
  &lt;div class=&quot;ds-box3 ds-w25 ds-border&quot;&gt;
    &lt;div&gt;&lt;img src=&quot;images/logo.imge&quot; style=&quot;width:2.5rem;&quot; /&gt;&lt;/div&gt;
    &lt;div&gt;
      &lt;div&gt;bjtang&lt;/div&gt;
      &lt;div&gt;&lt;span class=&quot;ds-text4&quot;&gt;www.bjtang.com&lt;/span&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;ds-box3 ds-w25 ds-border&quot;&gt;
    &lt;div&gt;
      &lt;div&gt;bjtang&lt;/div&gt;
      &lt;div&gt;&lt;span class=&quot;ds-text4&quot;&gt;www.bjtang.com&lt;/span&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div&gt;&lt;img src=&quot;images/logo.imge&quot; style=&quot;width:2.5rem;&quot; /&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;ds-box3 ds-w25 ds-border&quot;&gt;
    &lt;div&gt;&lt;img src=&quot;images/logo.imge&quot; style=&quot;width:2.5rem;&quot; /&gt;&lt;/div&gt;
    &lt;div&gt;
      &lt;div&gt;bjtang&lt;/div&gt;
      &lt;div&gt;&lt;span class=&quot;ds-text4&quot;&gt;www.bjtang.com&lt;/span&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;div&gt;重庆&lt;/div&gt;
      &lt;div&gt;&lt;span class=&quot;ds-text4&quot;&gt;2020-1-1&lt;/span&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;ds-box3 ds-w25 ds-border&quot;&gt;
    &lt;div&gt;
      &lt;div&gt;bjtang&lt;/div&gt;
      &lt;div&gt;&lt;span class=&quot;ds-text4&quot;&gt;www.bjtang.com&lt;/span&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;div&gt;重庆&lt;/div&gt;
      &lt;div&gt;&lt;span class=&quot;ds-text4&quot;&gt;2020-1-1&lt;/span&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div&gt;&lt;img src=&quot;images/logo.imge&quot; style=&quot;width:2.5rem;&quot; /&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
            <h3>分割线</h3>
            <div class="ds-horizontal">
              <div class="ds-box ds-border">
                <div>bjtang</div>
                <hr>
                <div><img src="images/logo.imge" style="width:4rem;" /></div>
              </div>
              <div class="ds-box1 ds-border">
                <div>bjtang</div>
                <hr>
                <div><img src="images/logo.imge" style="width:4rem;" /></div>
              </div>
            </div>
            <pre><code>&lt;div class=&quot;ds-horizontal&quot;&gt;
  &lt;div class=&quot;ds-box ds-border&quot;&gt;
    &lt;div&gt;bjtang&lt;/div&gt;
    &lt;hr&gt;
    &lt;div&gt;&lt;img src=&quot;images/logo.imge&quot; style=&quot;width:4rem;&quot; /&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;ds-box1 ds-border&quot;&gt;
    &lt;div&gt;bjtang&lt;/div&gt;
    &lt;hr&gt;
    &lt;div&gt;&lt;img src=&quot;images/logo.imge&quot; style=&quot;width:4rem;&quot; /&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
            <div class="ds-horizontal">
              <div class="ds-box2 ds-border">
                <div><img src="images/logo.imge" style="width:2.5rem;" /></div>
                <hr>
                <div>
                  <div>bjtang</div>
                  <div><span class="ds-text4">www.bjtang.com</span></div>
                </div>
                <hr>
                <div>
                  <div>重庆</div>
                  <div><span class="ds-text4">2020-1-1</span></div>
                </div>
              </div>
              <div class="ds-box3 ds-border">
                <div>
                  <div>bjtang</div>
                  <div><span class="ds-text4">www.bjtang.com</span></div>
                </div>
                <hr>
                <div>
                  <div>重庆</div>
                  <div><span class="ds-text4">2020-1-1</span></div>
                </div>
                <hr>
                <div><img src="images/logo.imge" style="width:2.5rem;" /></div>
              </div>
            </div>
            <pre><code>&lt;div class=&quot;ds-horizontal&quot;&gt;
  &lt;div class=&quot;ds-box2 ds-border&quot;&gt;
    &lt;div&gt;&lt;img src=&quot;images/logo.imge&quot; style=&quot;width:2.5rem;&quot; /&gt;&lt;/div&gt;
    &lt;hr&gt;
    &lt;div&gt;
      &lt;div&gt;bjtang&lt;/div&gt;
      &lt;div&gt;&lt;span class=&quot;ds-text4&quot;&gt;www.bjtang.com&lt;/span&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;hr&gt;
    &lt;div&gt;
      &lt;div&gt;重庆&lt;/div&gt;
      &lt;div&gt;&lt;span class=&quot;ds-text4&quot;&gt;2020-1-1&lt;/span&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;ds-box3 ds-border&quot;&gt;
    &lt;div&gt;
      &lt;div&gt;bjtang&lt;/div&gt;
      &lt;div&gt;&lt;span class=&quot;ds-text4&quot;&gt;www.bjtang.com&lt;/span&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;hr&gt;
    &lt;div&gt;
      &lt;div&gt;重庆&lt;/div&gt;
      &lt;div&gt;&lt;span class=&quot;ds-text4&quot;&gt;2020-1-1&lt;/span&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;hr&gt;
    &lt;div&gt;&lt;img src=&quot;images/logo.imge&quot; style=&quot;width:2.5rem;&quot; /&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
            <h2 id="text">文本预定义</h2>
            <h3>标题文本</h3>
            <div class="ds-bg">
              <div class="ds-h1">H1 标题1 (ds-h1)</div>
              <div class="ds-h2">H2 标题2 (ds-h2)</div>
              <div class="ds-h3">H3 标题3 (ds-h3)</div>
              <div class="ds-h4">H4 标题4 (ds-h4)</div>
              <div class="ds-h5">H5 标题5 (ds-h5)</div>
              <pre><code>&lt;div class=&quot;ds-h1&quot;&gt;H1 (ds-h1)&lt;/div&gt;
&lt;div class=&quot;ds-h2&quot;&gt;H2 (ds-h2)&lt;/div&gt;
&lt;div class=&quot;ds-h3&quot;&gt;H3 (ds-h3)&lt;/div&gt;
&lt;div class=&quot;ds-h4&quot;&gt;H4 (ds-h4)&lt;/div&gt;
&lt;div class=&quot;ds-h5&quot;&gt;H5 (ds-h5)&lt;/div&gt;</code></pre>
            </div>
            <h3>内容文本</h3>
            <div class="ds-bg">
              <div class="ds-text1">Text 1 文本1 (ds-text1)</div>
              <div class="ds-text2">Text 2 文本2 (ds-text2)</div>
              <div class="ds-text3">Text 3 文本3 (ds-text3)</div>
              <div class="ds-text4">Text 4 文本4 (ds-text4)</div>
              <div class="ds-text5">Text 5 文本5 (ds-text5)</div>
            </div>
            <p>其中 "ds-text3" 文本字体大小为 1rem</p>
            <pre><code>&lt;div class=&quot;ds-text1&quot;&gt;Text 1 (ds-text1)&lt;/div&gt;
&lt;div class=&quot;ds-text2&quot;&gt;Text 2 (ds-text2)&lt;/div&gt;
&lt;div class=&quot;ds-text3&quot;&gt;Text 3 (ds-text3)&lt;/div&gt;
&lt;div class=&quot;ds-text4&quot;&gt;Text 4 (ds-text4)&lt;/div&gt;
&lt;div class=&quot;ds-text5&quot;&gt;Text 5 (ds-text5)&lt;/div&gt;</code></pre>
            <h3>文本分2栏</h3>
            <div class="ds-column2 ds-border ds-bg">
              <p>CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。</p>
              <p>CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新，因此通过采用模块方法，CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时间支持不同特性，这也让跨浏览器开发变得复杂。</p>
            </div>
            <pre><code>&lt;div class=&quot;ds-column2 ds-border ds-bg&quot;&gt;
  &lt;p&gt;...&lt;/p&gt;
  &lt;p&gt;...&lt;/p&gt;
&lt;/div&gt;</code></pre>
            <h3>文本分3栏</h3>
            <div class="ds-column3 ds-border ds-bg">
              <p>CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。</p>
              <p>CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新，因此通过采用模块方法，CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时间支持不同特性，这也让跨浏览器开发变得复杂。</p>
            </div>
            <pre><code>&lt;div class=&quot;ds-column3 ds-border ds-bg&quot;&gt;
  &lt;p&gt;...&lt;/p&gt;
  &lt;p&gt;...&lt;/p&gt;
&lt;/div&gt;</code></pre>
            <h3>文本分4栏</h3>
            <div class="ds-column4 ds-border ds-bg">
              <p>CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。</p>
              <p>CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新，因此通过采用模块方法，CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时间支持不同特性，这也让跨浏览器开发变得复杂。</p>
            </div>
            <pre><code>&lt;div class=&quot;ds-column4 ds-border ds-bg&quot;&gt;
  &lt;p&gt;...&lt;/p&gt;
  &lt;p&gt;...&lt;/p&gt;
&lt;/div&gt;</code></pre>
            <h3>文本分5栏</h3>
            <div class="ds-column5 ds-border ds-bg">
              <p>CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。</p>
              <p>CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新，因此通过采用模块方法，CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时间支持不同特性，这也让跨浏览器开发变得复杂。</p>
            </div>
            <pre><code>&lt;div class=&quot;ds-column5 ds-border ds-bg&quot;&gt;
  &lt;p&gt;...&lt;/p&gt;
  &lt;p&gt;...&lt;/p&gt;
&lt;/div&gt;</code></pre>
            <h2>边框</h2>
            <div class="ds-flow">
              <div class="ds-border" style="width:100px; height:100px;"><span class="ds-center-middle">ds-border</span></div>
              <div class="ds-border1" style="width:100px; height:100px;"><span class="ds-center-middle">ds-border1</span></div>
              <div class="ds-border2" style="width:100px; height:100px;"><span class="ds-center-middle">ds-border2</span></div>
              <div class="ds-border3" style="width:100px; height:100px;"><span class="ds-center-middle">ds-border3</span></div>
              <div class="ds-border4" style="width:100px; height:100px;"><span class="ds-center-middle">ds-border4</span></div>
              <div class="ds-border5" style="width:100px; height:100px;"><span class="ds-center-middle">ds-border5</span></div>
              <div class="ds-border6" style="width:100px; height:100px;"><span class="ds-center-middle">ds-border6</span></div>
              <div class="ds-border7" style="width:100px; height:100px;"><span class="ds-center-middle">ds-border7</span></div>
              <div class="ds-border8" style="width:100px; height:100px;"><span class="ds-center-middle">ds-border8</span></div>
              <div class="ds-border9" style="width:100px; height:100px;"><span class="ds-center-middle">ds-border9</span></div>
            </div>
            <h2>隐藏/显示</h2>
            <div id="show_hide">
              <div class="ds-hide ds-border">ds-hide</div>
              <div class="ds-show ds-border">ds-show</div>
            </div>
            <div></div>
            <div></div>
            <h2>告警动画</h2>
            <div class="ds-warning1">一般告警</div>
            <div class="ds-warning2">升级告警</div>
            <div class="ds-danger1">一般严重</div>
            <div class="ds-danger2">升级严重</div>
          </div>
        </div>
      </div>
      <div class="ds-footer">
        FOOTER
      </div>
    </div>
  </body>
</html>
<script>
  /*数字滚动*/
  function refreshNumber(id, value) {
    let e = $("#" + id)
    let source = Number(e.text())
    let f = function() {
      if (source !== value) {
        if (source > value) {
          id = source - value
          source -= id > 1000 ? 1000 : id > 100 ? 100 : id > 10 ? 10 : 1
          id = value / source * 20
        } else {
          id = value - source
          source += id > 1000 ? 1000 : id > 100 ? 100 : id > 10 ? 10 : 1
          id = source / value * 20
        }
        e.text(source)
        setTimeout(f, id)
      }
    }
    f()
  }

  /*内容滚动*/
  /*id 容器标识,其下得子元素将滚动*/
  /*min 显示的数量*/
  /*unit 每次显示/隐藏的数量*/
  function refreshList(id, min, unit, second) {
    let p = $("#" + id)
    let c = p.children()
    let index = 0
    let i = 0
    p.data("index", index)
    for (index = 0; index < c.length;) {
      for (i = 0; i < unit; i++, index++) {
        if (index < min) {
          c.eq(index).show()
        } else {
          c.eq(index).hide()
        }
      }
    }
    setInterval(() => {
      index = p.data("index")
      for (i = 0; index < c.length && i < unit; i++, index++) {
        c.eq(index).animate({
          opacity: 0
        }, 500, function() {
          $(this).hide()
        })
      }
      if (index >= c.length) {
        index = 0
      }
      p.data("index", index)

      index += min - unit
      if (index >= c.length) {
        index = index - c.length
      }
      for (i = 0; i < unit; i++, index++) {
        if (index >= c.length) {
          index = 0
          break
        }
        c.eq(index).animate({
          opacity: 1
        }, {
          start: function() {
            $(this).css("opacity", 0).css("display", 'auto')
          }
        })
      }
    }, second * 1000)
  }

  refreshList("show_hide", 1, 1, 3)
</script>
